<template>
	<view class="details">
		<xbd-pages-content :title="title">
			<template #content>
				<view class="content" :style="'minHight : ' + windowHeight + 'px;'">
					<view class="box">
						<view class="">
							<text>申请部门</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_department_name}}</text>
						</view>
						<view class="icon">
							<image v-if="fromDate.apply_state==='passed'" src="../../static/images/meal/yes.svg"
								mode=""></image>
							<image v-else-if="fromDate.apply_state==='wait'" src="../../static/images/meal/stay.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.apply_state==='refused'" src="../../static/images/meal/no.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.apply_state==='pending'"
								src="../../static/images/meal/underway.png" mode=""></image>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>部门负责人</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_charge_name}}</text>
						</view>
					</view>

					<view class="box">
						<view class="">
							<text>接待事由</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_reason}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>接待标准</text>
						</view>
					</view>
					<!-- 接待标准 -->
					<view class="items">
						<view class="items_msg">
							<view class="items_tag">
								套间
							</view>
							<view class="items_tag">
								{{fromDate.apply_standard_suite}}
							</view>
							<view class="items_tag">
								标间
							</view>
							<view class="items_tag2">
								{{fromDate.apply_standard_room}}
							</view>
						</view>
						<view class="items_msg">
							<view class="items_tag">
								真硒水
							</view>
							<view class="items_tag">
								{{fromDate.apply_standard_water}}
							</view>
							<view class="items_tag">
								拖鞋
							</view>
							<view class="items_tag2">
								{{fromDate.apply_standard_slipper}}
							</view>
						</view>
						<view class="items_msg">
							<view class="items_tag">
								洗漱套装
							</view>
							<view class="items_tag">
								{{fromDate.apply_standard_wash}}
							</view>
							<view class="items_tag">
								茶叶
							</view>
							<view class="items_tag2">
								{{fromDate.apply_standard_tea}}
							</view>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>入住时间</text>
						</view>
						<view class="">
							<view class="box_right date">
								<text>{{fromDate.apply_start_time | timeFormat('YYYY-MM-DD')}}</text>
								<text>{{fromDate.apply_start_time | timeFormat('HH:mm')}}</text>
							</view>
							<view class="box_tag">
								<text>至</text>
							</view>
							<view class="box_right date">
								<text>{{fromDate.apply_end_time | timeFormat('YYYY-MM-DD')}}</text>
								<text>{{fromDate.apply_end_time | timeFormat('HH:mm')}}</text>
							</view>
						</view>
					</view>

					<view class="guest" v-for="(item,index) in fromDate.apply_guest" :key="index">
						<view class=type>
							客人信息{{(index + 1) }}：
						</view>
						<view class="guest_conter">
							<view class="type">
								<view>所属单位</view>
								<view class="guest_msg">{{item.unit}}</view>
							</view>
							<view class="type">
								<view>人员姓名</view>
								<view class="guest_msg">{{item.name}}</view>
							</view>
							<view class="type">
								<view>联系方式</view>
								<view class="guest_msg">{{item.phone}}</view>
							</view>
						</view>

					</view>


					<view class="line">
					</view>

					<view class="title">流程</view>
					<view class="flow">

						<view class="type" v-for="(item,index) in fromDate.apply_process" :key="index">
							<view class="left">
								<view class="radio">
								</view>
								<view class="line2">
								</view>
							</view>
							<view class="msg">
								<view class="msg_box">
									<view class="msg_tag">
										<view class="name">
											<text class="people">{{item.identity}}：</text>
											<text>{{item.name}}</text>
										</view>
										<text v-if="item.state==='refused'" class=" no">拒绝</text>
										<text v-if="item.state==='passed'" class=" yes">同意</text>
									</view>
									<view class="date">
										<text>{{item.time | timeFormat('MM-DD HH:mm')}}</text>
									</view>
								</view>
								<view v-if="item.state==='refused'" class="reason">
									<view>拒绝原因：{{item.reason}}</view>
								</view>
							</view>
						</view>

					</view>
					<view class="foot">
						<view
							v-if="type === '2' && (fromDate.apply_state === 'wait' || fromDate.apply_state === 'pending') && showBtn === true "
							class="btns">
							<button class="draft" @click="draft">拒绝审批</button>
							<button class="upload" @click="pass">审批通过</button>
						</view>
						<view v-if="type === '1' && fromDate.apply_state === 'wait'" class="btns">
							<button class="revocation" @click="revocation">撤销申请</button>
						</view>
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'>
						<template>
							<view class="draft_reason">
								<text>拒绝审批</text>
								<uni-easyinput class="textarea" type="textarea" v-model="draftResone"
									placeholder="请输入拒绝原因：" :maxlength="30"></uni-easyinput>
								<!-- #ifdef APP-PLUS || H5 -->
								<view class="mit">
									字数限制：30字
								</view>
								<!-- #endif -->
							</view>
						</template>
					</xbd-popup>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		House
	} from '@/api/index.js';
	export default {
		data() {

			return {
				flag: true,
				id: '',
				title: '申请详情',
				type: '',
				showDialog: false,
				draftResone: '',
				fromDate: {},
				department: [],
				info: {
					id: '',
					state: "",
					reason: ""
				},
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				}
			}
		},
		methods: {
			dialogConfirm() {
				//弹出框确认操作
				if (this.draftResone.length) {
					this.showDialog = false;
					this.option.msg = "审批拒绝"
					this.option.pass = false
					this.refus()
				} else {
					this.$showToast('请输入拒绝理由');
				}
			},
			dialogCancel() {
				this.draftResone = ''
				this.showDialog = false;
			},

			draft() {
				this.showDialog = true;
			},

			pass() {
				this.option.msg = "审批通过"
				this.passed()

			},
			// 拒绝申请
			async refus() {
				this.info.state = 'refused'
				this.info.reason = this.draftResone
				if (this.flag) {
				try {
					this.flag = false
					this.$showLoading('加载中');
					const res = await House.putApproval(this.info);
					uni.hideLoading();
					if (res.success) {
						if(res.code===9527){
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.redirectTo({
								url: `../status/status?option=${JSON.stringify(this.option)}`
							});
						}
					} else {
						this.flag = true
						this.$showToast(res.msg);
					
					}
				} catch (e) {
					this.flag = true
					uni.hideLoading();
				}
				}
			},
			// 审批通过
			async passed() {
				this.info.state = 'passed'
				if (this.flag) {
				try {
					this.flag = false
					this.$showLoading('加载中');
					const res = await House.putApproval(this.info);
					uni.hideLoading();
					if (res.success) {
						if(res.code===9527){
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.redirectTo({
								url: `../status/status?option=${JSON.stringify(this.option)}`
							});
						}

					} else {
						this.flag = true
						this.$showToast(res.msg);
					}
				} catch (e) {
					this.flag = true
					uni.hideLoading();
				}
				}
			},
			// 撤销申请
			async revocation() {
				this.option.msg = "撤销成功"
				this.info.state = 'cancelled'
				this.option.title = '我的申请'
				if (this.flag) {
				try {
					this.flag = false
					this.$showLoading('加载中');
					const res = await House.putRevocation(this.info);
					uni.hideLoading();
					if (res.success) {
						if(res.code ===9527){
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.redirectTo({
								url: `../status/status?option=${JSON.stringify(this.option)}`
							});
						}
					} else {
						this.flag = true
						this.$showToast(res.msg);
					}

				} catch (e) {
					this.flag = true
					uni.hideLoading();
				}
				}
			},
			// 初始化表单
			async init() {
				const id = this.id
				try {
					this.$showLoading('加载中');
					const {
						data: {
							data
						}
					} = await House.getDetails(id);
					uni.hideLoading();
					this.fromDate = data;
					data.apply_process.forEach(item => {
						if (!item.name.length) {
							this.department.push(item.identity)
						}

					})

				} catch (e) {
					uni.hideLoading();
				}
			},
		},
		computed: {
			...mapState(['windowHeight', 'userInfo']),
			showBtn() {
				let flag = false;
				for (let i = 0; i < this.department.length; i++) {
					if (!flag) {
						if (this.userInfo.user_permission.indexOf(this.department[i]) === -1) {
							flag = false
						} else {
							flag = true
						}
					}
				}
				return flag;
			}
		},
		onLoad(res) {
			this.type = res.msg
			this.id = res.id
			this.info.id = this.id
			this.title = res.title
			uni.setNavigationBarTitle({
			    title: this.title
			});
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	.content {
		padding: 30px 50rpx;
		font-size: 32rpx;

		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;

			.box_right {
				box-sizing: border-box;
				padding-top: 4rpx;
				font-size: 28rpx;
				width: 420rpx;
				text-align: justify;
				word-wrap: break-word;
			}

			.box_tag {
				margin: 20px 0;
			}

			.date {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}



		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}

		.flow {
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 100rpx;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					word-break: break-all;
					margin-top: 20px;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				font-size: 32rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					display: flex;

					.name {
						margin-right: 40rpx;

						.people {
							font-size: 32rpx;
							color: #194769;
						}
					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;

					text {
						margin-left: 20rpx;
					}
				}
			}

		}

		.items {
			box-sizing: border-box;
			padding-left: 40rpx;

			.items_msg {
				display: flex;
				justify-content: space-between;
				// background-color: red;
				margin-bottom: 30px;

				.items_tag {
					width: 140rpx;
				}

				.items_tag2 {
					width: 60rpx;
					margin-left: -40rpx;
					margin-right: 120rpx;
				}
			}

		}

		.guest {
			font-size: 32rpx;

			.guest_conter {
				padding-left: 40rpx;
			}

			.guest_msg {
				box-sizing: border-box;
				padding-top: 4rpx;
				margin-left: 40rpx;
				font-size: 28rpx;
				color: #222222;
			}

			.type {
				margin-bottom: 25px;
				margin-right: 40rpx;
			}
		}

		.foot {
			margin-top: 20px;
			box-sizing: border-box;
			padding: 20upx 4upx;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					background: url(../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}
	}

	.draft_reason {
		position: relative;

		.textarea {
			box-sizing: border-box;
			margin: 10px 30rpx 10px 30rpx;
			width: 440rpx;
			text-align: left;
			font-size: 28rpx;
		}

		.mit {
			position: absolute;
			bottom: 6px;
			right: 40rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
